<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>用户登录 - </title>
    <link href="/static/favicon.ico" rel="shortcut icon">
    <link href="/static/plugin??font-awesome-4.7.0/css/font-awesome.min.css,bootstrap/css/bootstrap.min.css,bootstrap-validator/css/bootstrapValidator.css,bootstrap-fileinput/css/fileinput.min.css"  rel="stylesheet" type="text/css" />
    <link href="/static/css/main.css" rel="stylesheet" type="text/css" />
    <script src="/static/plugin/jquery/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="/static/js/main.js" type="text/javascript"></script>
    <style>
        @media (min-width: 769px){
            #mainBody{
                margin-top: 100px;
                margin-bottom: 100px;
            }
        }
    </style>
</head>
<body>
    <div class="ms-lyt-background" >
        <img src="/static/img/bg.jpg"/>
    </div>
    <header>
    <nav class="navbar navbar-default mb0">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand ms-lyt-brand" href="/" style="padding: 0px">
                    <img src="/static/img/logo.png" height="50px">
                    <img src="/static/img/blog.png" height="30px">
                </a>
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="/">首页</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">文章<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                    <li><a href="/">关于</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right ms-navbar">
                    <li><a href="/login.html" class="inline-block pr5">登录</a>/<a href="/register.html" class="inline-block pl5">注册</a></li>
                </ul>

            </div>


        </div>
    </nav>
    </header>

    <div id="mainBody" class="container pl0 pr0">
        <div class="panel panel-default radius0 border0">
            <div class="panel-body">
                <div class="col-xs-offset-1 col-xs-10 col-sm-offset-4 col-sm-4 col-lg-offset-5 col-lg-2">
        <form id="loginForm" class="form-horizontal" method="post">
                <div class="text-center ms-form-title mb10">用户登录</div>

                <div class="form-group">
                    <input type="text" class="form-control" id="account" name="account"  placeholder="用户名/邮箱">
                </div>
                <div class="form-group mb8">
                    <input type="password" class="form-control" id="password" name="password" placeholder="密码">
                </div>

                <div class="form-group">
                    <input id="rememberCheck" type="checkbox"  name="rememberMe"> 自动登录
                    <select id="rememberSlt" name="maxAge" style="display: none">
                        <option value="259200">3天</option>
                        <option value="604800">7天</option>
                        <option value="2592000">30天</option>
                        <option value="5184000">60天</option>
                        <option value="10368000">120天</option>
                        <option value="31536000">365天</option>
                    </select>
                </div>

                <div class="form-group">
                      <button id="login-btn" type="button" class="btn  btn-info btn-submit" style="width: 100%">登  录</button>
                </div>
                <div class="form-group text-center">
                    没有账号? <a href="/register.html" >立即注册</a>
                </div>
        </form>
</div>
            </div>
        </div>
    </div>

    <footer>
        <div id="copyright"  class="text-center">(c) Copyright 2017 jxufe nb112. All Rights Reserved.</div>
    </footer>
    <script src="/static/plugin/??bootstrap/js/bootstrap.min.js,bootstrap-validator/js/bootstrapValidator.js,bootstrap-validator/js/language/zh_CN.js,layer/layer.js" type="text/javascript" ></script>
    <script src="/static/js/main.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {
            $("#loginForm").bootstrapValidator({
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    account: {
                        validators: {
                            notEmpty: {
                                message: '请输入要账号或验证的邮箱'
                            },
                            regexp: {
                                regexp: /^[_A-z0-9]{4,30}$|^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
                                message: '用户名要是英文字母,数字,下划线_,长度4至30位,邮箱'
                            }
                        }
                    },
                    password: {
                        validators: {
                            notEmpty: {},
                            stringLength: {
                                min: 6,
                                max: 30
                            }
                        }
                    }
                }
            });
            formAutoSubmit("#loginForm",login);
            $("#login-btn").click(login);
            $("#rememberCheck").click(function () {
                toggleShow("#rememberSlt");
            });

        });
        function  login() {
            ajaxSubmitForm("#loginForm",{
                url:ctx+"/login",
                closeMask:false,
                subsuccess:function(data) {
                    successTipBox("登录成功",function () {
                        closeLoadLayer();
                        window.location.href=ctx;
                    });
                }
            })
        }
    </script>

</body>
</html>